<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<style id="styleTag"></style>
	<style>
		.high {
			color: red;
			font-size: 22px;
			font-weight: 700;
		}
	</style>
</head>

<body>
	<pre id="code"></pre>
	<script>
		let text = `
		瓜洲闻晓角

		唐代：张祜

		寒耿稀星照碧霄，月楼吹角夜江遥。 
		五更人起烟霜静，一曲残声遍落潮。 
		`
		let textStyle = `
    body{
      background:pink;
    }
    `

		let index = 0
		let id = setInterval(() => {
			index += 1
			index >= text.length ? clearInterval(id) : null
			styleTag.innerHTML = textStyle.slice(0, index)
			code.innerHTML = text.slice(0, index).replace(/(张祜)/g, match => {
				return `<span class="high">${match}</span>`
			})
		}, 40)
	</script>
</body>

</html>